<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/static/img/logo.png"/>
    <title>启慧信息技术公司人事管理系统</title>
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/mmss.css"/>
    <link rel="stylesheet" href="/static/css/font-awesome.min.css"/>
    <!--[if lt IE 9]>
    <script src="/static/js/html5shiv.min.js"></script>
    <script src="/static/js/respond.min.js"></script>
    <![endif]-->
    <style>

    </style>
</head>
<body>
<section>
    <div class="container">
        <div class="row ">
            <div class="col-xs-12">
                <br/>
                <ol class="breadcrumb">
                    <li><a href="/main"><span class="glyphicon glyphicon-home"></span>&nbsp;后台首页</a></li>
                    <li class="active">考勤管理</li>
                    <li class="active">请假信息</li>
                </ol>
                <!--顶部搜索栏开始,按照指定的条件进行搜索-->
                <form th:action="@{/leavee/list}">
                    <div class="input-group line left">
                        <span class="input-group-addon" id="basic-addon2">
                            <span class="glyphicon glyphicon-search">
                            </span>
                        </span>

                        <input name="searchContent" type="text" class="form-control" placeholder="输入关键字搜索" aria-describedby="basic-addon2">
                    </div>
                    <select name = "option" class="form-control line left">
                        <option value="leave_id">请假id</option>
                        <option value="user_id">用户id</option>
                        <option value="name">请假人</option>
                        <option value="create_time">请假创建时间</option>
                        <option value="start_time">请假开始时间</option>
                        <option value="end_time">请假结束时间</option>
                        <option value="type">请假类型</option>
                        <option value="result">请假结果</option>
                        <option value="leave_state">请假状态</option>

                    </select>

                    <button shiro:hasPermission="leavee:search" type="submit" class=" btn btn-primary ">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                    <a shiro:hasPermission="leavee:add" href="#" class="btn btn-success btn-sm" data-toggle="modal" data-target="#add1">请假申请</a>
                </form>
                <br/><br/>
                <!--顶部搜索栏结束-->
                <!--table表用来显示数据-->
                <table class="table table-bordered  table-condensed table-striped text-center bg-info">
                    <!--表头信息开始-->
                    <thead>
                        <tr class="info">
                            <th class="text-center">请假id</th>  <!--0-->
                            <th class="text-center">用户id</th>  <!--0-->
                            <th class="text-center">请假人</th>  <!--0-->
                            <th class="text-center">请假创建时间</th>  <!--1-->
                            <th class="text-center">请假开始时间</th> <!--2-->
                            <th class="text-center">请假结束时间</th> <!--3-->
                            <th class="text-center">请假类型</th> <!--3-->
                            <th class="text-center">请假结果</th> <!--3-->
                            <th class="text-center">请假状态</th> <!--3-->
                            <th class="text-center">操作</th> <!--5-->
                        </tr>
                    </thead>
                    <!--表头信息结束-->
                    <!--表数据开始-->
                    <tbody>
                        <!--输出封装在model中的pageInfo数据-->

                        <tr th:each="leavee:${pageInfo.getResult()}">
                            <td th:text="${leavee.leaveId}"></td> <!--0-->
                            <td th:text="${leavee.userId}"></td> <!--0-->
                            <!--<td th:text="${leavee.user.name}"></td>--><!--1-->
                            <td>
                                <div th:each="user:${leavee.getUser()}" th:text="${user.getName()}"></div>
                            </td>
                            <td th:text="${leavee.createTime}"></td><!--2-->
                            <td th:text="${leavee.startTime}"></td><!--3-->
                            <td th:text="${leavee.endTime}"></td><!--4-->
                            <td th:text="${leavee.type}"></td><!--5-->
                            <td th:text="${leavee.result}"></td><!--6-->
                            <td th:text="${leavee.leaveState}"></td>

                            <td>
                                <a  shiro:hasPermission="leavee:agree"
                                    class="btn btn-success btn-sm"  data-target="#agree" data-toggle="modal" onclick="agree(this)">请假审批</a>
                                <a  shiro:hasPermission="leavee:edit"
                                class="btn btn-primary btn-sm" data-toggle="modal" data-target="#edit" onclick="edit(this)">请假编辑</a>
                                <a shiro:hasPermission="leavee:del"
                                   class="btn btn-warning btn-sm"  th:onclick="|delLeavee(${leavee.leaveId})|">请假撤销</a>
                            </td>
                            <!--模态框开始-->
                            <!--添加模态框开始-->
                                <div class="modal fade" id="add1" tabindex="-1" role="dialog"  aria-labelledby="add11">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                                <h4 class="modal-title" id="add11">请假创建</h4>
                                            </div>
                                            <form th:action="@{/leavee/add}" method="post">
                                                <div class="modal-body">
                                                    <ul>
                                                        <li class="form-inline">
                                                            <label><span>用户Id</span></label>
                                                            <input type="text" name="userId" />
                                                        </li>
                                                        <!--<li class="form-inline">-->
                                                        <!--    <label><span>请假人</span></label>-->
                                                        <!--    <input type="text" name="name" />-->
                                                        <!--</li>-->

                                                        <li class="form-inline">
                                                            <label><span>请假创建时间</span></label>
                                                            <input type="datetime-local" name="createTime"/>
                                                        </li>
                                                        <li class="form-inline">
                                                            <label><span>请假开始时间</span></label>
                                                            <input type="datetime-local" name="startTime"/>
                                                        </li>
                                                        <li class="form-inline">
                                                            <label><span>请假结束时间</span></label>
                                                            <input type="datetime-local" name="endTime"/>
                                                        </li>
                                                        <li class="form-inline">
                                                            <label><span>请假类型:</span></label>
                                                            <select class="form-control form-group-sm" name="type">
                                                                <option >------请选择请假类型------</option>
                                                                <option value="事假">事假</option>
                                                                <option value="婚假">婚假</option>
                                                                <option value="丧假">丧假</option>
                                                                <option value="病假">病假</option>
                                                            </select>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <!--模态框底部的取消和保存按钮-->
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
                                                        取消
                                                    </button>
                                                    <button type="submit" class="btn btn-primary btn-sm">保存</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            <!--添加模态框结束-->
                            <!--修改模态框开始-->
                            <div class="modal fade" id="edit" tabindex="-1" role="dialog"  aria-labelledby="edit">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <h4 class="modal-title" id="edit11">请假修改</h4>
                                        </div>
                                        <form th:action="@{/leavee/edit}" method="post">
                                            <div class="modal-body">
                                                <ul>
                                                    <li class="form-inline" hidden="hidden">
                                                        <label><span>请假Id</span></label>
                                                        <input type="hidden" name="leaveId" readonly id="leaveId" />
                                                    </li>
                                                    <li class="form-inline">
                                                        <label><span>用户Id</span></label>
                                                        <input type="text" name="userId"  readonly id="userId"/>
                                                    </li>
                                                    <li class="form-inline">
                                                        <label><span>请假人</span></label>
                                                        <input type="text" readonly name="name" id="name" />
                                                    </li>
                                                    <!--<li class="form-inline">-->
                                                    <!--    <label><span>请假人</span></label>-->
                                                    <!--    <input type="text" name="name" />-->
                                                    <!--</li>-->

                                                    <li class="form-inline">
                                                        <label><span>请假创建时间</span></label>
                                                        <input type="datetime-local" name="createTime" id="createTime"/>
                                                    </li>
                                                    <li class="form-inline">
                                                        <label><span>请假开始时间</span></label>
                                                        <input type="datetime-local" name="startTime" id="startTime"/>
                                                    </li>
                                                    <li class="form-inline">
                                                        <label><span>请假结束时间</span></label>
                                                        <input type="datetime-local" name="endTime" id="endTime"/>
                                                    </li>
                                                    <li class="form-inline">
                                                        <label><span>请假类型:</span></label>
                                                        <select class="form-control form-group-sm" name="type" id="type">
                                                            <option value="事假" >事假</option>
                                                            <option value="婚假">婚假</option>
                                                            <option value="丧假">丧假</option>
                                                            <option value="病假">病假</option>
                                                        </select>
                                                    </li>
                                                </ul>
                                            </div>
                                            <!--模态框底部的取消和保存按钮-->
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
                                                    取消
                                                </button>
                                                <button type="submit" class="btn btn-primary btn-sm">保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!--修改模态框结束-->
                            <!--审批模态框开始,实则就是修改一个字段而已-->
                            <div class="modal fade" id="agree" tabindex="-1" role="dialog"  aria-labelledby="agree">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <h4 class="modal-title" id="agree11">请假审批</h4>
                                        </div>
                                        <form th:action="@{/leavee/agree}" method="post">
                                            <div class="modal-body">
                                                <ul>
                                                    <li class="form-inline" hidden="hidden">
                                                        <label><span>请假Id</span></label>
                                                        <input type="hidden" name="leaveId1" id="leaveId1" />
                                                    </li>
                                                    <li class="form-inline">
                                                        <label><span>请假开始时间</span></label>
                                                        <input type="datetime-local" name="startTime1" id="startTime1"/>
                                                    </li>
                                                    <li class="form-inline">
                                                        <label><span>请假结束时间</span></label>
                                                        <input type="datetime-local" name="endTime1" id="endTime1"/>
                                                    </li>
                                                    <li class="form-inline">
                                                        <label><span>请假类型</span></label>
                                                        <input type="text" name="type1" id="type1"/>
                                                    </li>

                                                    <li class="form-inline">
                                                        <label><span>审核结果:</span></label>
                                                        <select class="form-control form-group-sm" name="result" id="result">
                                                            <option >------请选择审核结果------</option>
                                                            <option value="审核通过">审核通过</option>
                                                            <option value="审核未通过">审核未通过</option>
                                                        </select>
                                                    </li>

                                                </ul>
                                            </div>
                                            <!--模态框底部的取消和保存按钮-->
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
                                                    取消
                                                </button>
                                                <button type="submit" class="btn btn-primary btn-sm">保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!--审批模态框结束-->
                            <!--模态框结束-->

                        </tr>
                    </tbody>
                    <!--表数据开始-->
                </table>
                <!--分页-->
                <ul class="pagination right">
                    <div>
                        当前第 [[${pageInfo.pageNum}]]页，共 [[${pageInfo.pages}]] 页， 共 [[${pageInfo.total}]] 条记录
                    </div>
                    <!--上一页按钮-->
                    <li th:class="${pageInfo.getPageNum()<=1 ? 'disabled' :''}">
                        <a th:disabled="${pageInfo.getPageNum()<=1}" onclick="return checkDisable(this)" href="#" th:href="@{/leavee/list(pageNum=${pageInfo.getPageNum()-1},pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}"  aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                    </li>

                    <li th:class="${pageInfo.getPageNum()==1 ? 'active' :''}"><a href="#" th:href="@{/leavee/list(pageNum=1,pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}">1</a></li>

                    <li ><a href="#">...</a></li>

                    <li th:if="${pageInfo.getPageNum()!=1 and pageInfo.getPageNum()!=pageInfo.getPages()}" th:class="active"><a href="#" th:text="${pageInfo.getPageNum()}"><span class="sr-only"></span></a></li>

                    <li ><a href="#">...</a></li>

                    <li th:class="${pageInfo.getPageNum()==pageInfo.getPages() ? 'active' :''}"><a href="#" th:href="@{/leavee/list(pageNum=${pageInfo.getPages()},pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}" th:text="${pageInfo.getPages()}"></a></li>

                    <!--下一页按钮-->
                    <li th:class="${pageInfo.getPageNum()>=pageInfo.getPages() ? 'disabled' :''}">
                        <a th:disabled="${pageInfo.getPageNum()>=pageInfo.getPages()}" onclick="return checkDisable(this)"  href="#" th:href="@{/leavee/list(pageNum=${pageInfo.getPageNum()+1},pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
                    </li>

                </ul>
            </div>
            <!--右侧内容结束-->
        </div>
    </div>
</section>
</body>
</html>

<script src="/static/js/jquery-1.11.3.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script>

    function delLeavee(leaveId){
        if(confirm("您确定要撤销该条请假记录吗?")){
            $.ajax({
                url: "/leavee/del?leaveId="+leaveId,
                type:"post"
            })
        }

    }
    function checkDisable(obj){
        var attr = $(obj).attr("disabled");
        return attr !== "disabled";
    }

    //修改模态框数据的回显
    function edit(ob){
        var aDate = $(ob).parent().parent().find("td");
        //console.log(aDate.eq(0).text());
        console.log(aDate.eq(1).text());
        $("#leaveId").val(aDate.eq(0).text())
        $("#userId").val(aDate.eq(1).text())
        $("#name").val(aDate.eq(2).text())
        $("#createTime").val(aDate.eq(3).text());
        $("#startTime").val(aDate.eq(4).text());
        $("#endTime").val(aDate.eq(5).text());
        $("#type").val(aDate.eq(6).text());
    }
    //请假审批模态框请假id数据的回显,不然会报空指针异常
    function agree(ob){
        var aDate = $(ob).parent().parent().find("td");
        $("#leaveId1").val(aDate.eq(0).text());
        $("#startTime1").val(aDate.eq(4).text());
        $("#endTime1").val(aDate.eq(5).text());
        $("#type1").val(aDate.eq(6).text());
    }


</script>